<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue 生命周期</title>
</head>
<body>
<div id="app">
    <h2>世界，你好！</h2>
    <h2 ref="textRef">{{ message }}</h2>

    <button @click="message='你好！'">更新</button>
</div>

<script type="module">
    import {createApp, ref, reactive} from "../../../../js/vue.esm-browser.js";
    import {onBeforeMount, onMounted, onBeforeUpdate, onUpdated} from "../../../../js/vue.esm-browser.js";

    let app = createApp({
        setup() {

            let message = ref("Hello, World!")
            let textRef = ref(null)

            console.group("setup 初始状态")
            console.log("%c%s", "color:red", message.value)
            console.groupEnd()

            onBeforeMount(function () {
                console.group("onBeforeMount 的状态状态")
                console.log("%c%s", "color:green", message.value)
                console.log(textRef.value);
                console.groupEnd()
            })

            onMounted(function () {
                console.group("onMounted 的状态状态")
                console.log("%c%s", "color:green", message.value)
                console.log(textRef.value);
                console.groupEnd()
            })

            onBeforeUpdate(function () {
                console.group("onBeforeUpdate 的状态状态")
                console.log("%c%s", "color:green", message.value)
                console.log(textRef.value);
                console.groupEnd()
            })

            onUpdated(function () {
                console.group("onBeforeUpdate 的状态状态")
                console.log("%c%s", "color:green", message.value)
                console.log(textRef.value);
                console.groupEnd()
            })

            return {
                message,
                textRef,
            }
        }
    })

    app.mount("#app")
</script>
</body>
</html>